<template>
  <div class="todo-box">
    <div class="todo-tabs">
      <div
        class="todo-tab-item"
        v-for="item in tabs"
        :key="item.key"
        :class="{ activity: item.key === todoType }"
        @click="changeTabType(item)">
        <span>{{ item.label }}</span>
        <div class="count-box">
          <span class="count">{{ item.count }}</span>
        </div>
      </div>
    </div>
    <div class="todo-con">
      <div class="todo-header">
        <div class="todo-title">{{ todoName }}</div>
        <div class="todo-btn">
          <span class="num">共计{{ todoNum }}条</span>
          <!-- <span>
            更多
            <i class="el-icon-arrow-right"></i>
          </span> -->
        </div>
      </div>
      <el-scrollbar class="todo-scroll">
        <div class="todo-list" v-infinite-scroll="loadMore" :infinite-scroll-distance="10">
          <template v-if="todoList.length">
            <div class="todo-item" v-for="item in todoList" :key="item.id" @click="onItemClick(item)">
              <template v-if="todoType !== 'reply'">
                <div class="todo-top" :class="{ readed: item.isRead === '1' || todoType === 'done' }">
                  <span class="todo-tags">{{ item.busSign }}</span>
                  <span class="todo-tips">{{ item.tags }}</span>
                </div>
                <div class="todo-title" :title="item.needDealName">{{ item.needDealName }}</div>

                <template v-if="todoType === 'undo'">
                  <div class="todo-time" v-if="docList.includes(item.busSignId)">
                    {{ item.showStartTime }}
                    <span v-if="item.showStartTime || item.showEndTime">-</span>
                    {{ item.showEndTime }}
                  </div>
                  <div class="todo-time" v-else>{{ item.showStartTime || item.createTime }}</div>
                </template>
                <template v-else>
                  <div class="todo-time">{{ item.createTime }}</div>
                </template>
              </template>
              <template v-else>
                <div class="todo-top" :class="{ readed: item.isRead === '1' }">
                  <span class="todo-tags">{{ item.busSign }}</span>
                </div>
                <div class="todo-title" :title="item.needDealName">{{ item.needDealName }}</div>
                <div class="todo-time">{{ item.showStartTime }}</div>
              </template>
            </div>
          </template>
          <Empty v-else class="empty-box"></Empty>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { listNeedDeals, updateNeedDealRead, pageSelfRecordSuggest } from '@apis/home.js'
import Empty from '@com/Empty.vue'

export default {
  name: 'todoIndex',
  components: {
    Empty,
  },
  data() {
    return {
      todoType: 'undo', // undo, done
      todoName: '待办事项', // undo, done
      todoNum: 0, // undo, done
      pageIdx: 1,
      pageSize: 10,
      totalPages: 0,
      todoList: [],
      loading: false,
      tabs: [
        {
          label: '待办事项',
          key: 'undo',
          count: 12,
        },
        {
          label: '已办事项',
          key: 'done',
          count: 6,
        },
        {
          label: '纪实回复',
          key: 'reply',
          count: 0,
        },
      ],
      docList: ['01-01', '01-02', '01-03', '01-05'],
    }
  },
  created() {
    this.getTodoList()
    this.getTodoNum()
  },
  methods: {
    changeTabType(item) {
      if (item.key === this.todoType) return
      this.todoType = item.key
      this.todoName = item.label
      this.todoNum = item.count
      this.pageIdx = 1
      if (this.todoType === 'reply') {
        this.getReplyList()
      } else {
        this.getTodoList()
      }
    },
    async getTodoList(isAppend) {
      this.loading = true
      let type = '0'
      if (this.todoType === 'done') {
        type = '1'
      }
      let currentPage = this.pageIdx
      if (!isAppend) {
        this.todoList = []
      } else {
        currentPage++
      }
      const { code, data } = await listNeedDeals({
        currentPage: currentPage,
        pageSize: this.pageSize,
        param: type,
      })
      this.loading = false
      if (code === 0 && data && data.content) {
        this.todoNum = data.totalSize
        this.todoList.push(...data.content)
        if (isAppend) {
          this.pageIdx++
        }
        this.totalPages = data.totalPages
      }
      // this.$emit('todo-count', data.needCount || 0)
    },
    loadMore() {
      if (this.totalPages > this.pageIdx && !this.loading) {
        if (this.todoType === 'reply') {
          this.getReplyList(true)
        } else {
          this.getTodoList(true)
        }
      }
    },
    async onItemClick(item) {
      const urlArr = item.url.split('?')
      const str = urlArr[0].slice(1)
      if (this.todoType === 'undo') {
        let status = 0
        if (item.isRead !== '1') {
          const { code } = await updateNeedDealRead({
            id: item.needDealId,
          })
          status = code
        }
        if (status === 0) {
          if (this.docList.includes(item.busSignId)) {
            const urlStr = item.url.replace(str, 'document/index-write')
            this.$router.push(urlStr)
          } else if (str === 'evaluate') {
            const urlStr = item.url.replace(str, 'evaluate/edit')
            this.$router.push(urlStr)
          } else if (str === 'attendanceCheck') {
            const urlStr = item.url.replace(str, 'attendance/check')
            this.$router.push(urlStr)
          } else if (str === 'evaluationManageSum') {
            const urlStr = item.url.replace(str, 'minzhu/assess')
            this.$router.push(urlStr)
          } else {
            this.$router.push({
              path: item.url,
            })
          }
        }
      } else if (this.todoType === 'done') {
        if (this.docList.includes(item.busSignId)) {
          const urlStr = item.url.replace(str, 'document/index-detail') + '&isEnd=true'
          this.$router.push(urlStr)
        } else if (str === 'evaluate') {
          const urlStr = item.url.replace(str, 'evaluate/edit') + '&isEnd=true'
          this.$router.push(urlStr)
        } else if (str === 'attendanceCheck') {
          const urlStr = item.url.replace(str, 'attendance/check') + '&isEnd=true'
          this.$router.push(urlStr)
        } else if (str === 'evaluationManageSum') {
          const urlStr = item.url.replace(str, 'minzhu/assess') + '&isEnd=true'
          this.$router.push(urlStr)
        } else {
          this.$router.push({
            path: item.url + '&isEnd=true',
          })
        }
      } else if (this.todoType === 'reply') {
        const urlStr = item.url.replace(str, 'document/index-detail') + '&isEnd=true'
        this.$router.push(urlStr)
      }
    },
    getTodoNum() {
      listNeedDeals({
        currentPage: 1,
        pageSize: 1,
        param: '0',
      }).then(res => {
        this.tabs[0].count = res.data.totalSize
      })
      listNeedDeals({
        currentPage: 1,
        pageSize: 1,
        param: '1',
      }).then(res => {
        this.tabs[1].count = res.data.totalSize
      })
      pageSelfRecordSuggest({
        current: 1,
        size: 1,
        optionUserId: localStorage.pskh_userId,
        tenantId: localStorage.pskh_tenantId,
      }).then(res => {
        this.tabs[2].count = res.data.total
      })
    },
    async getReplyList(isAppend) {
      let currentPage = this.pageIdx
      if (!isAppend) {
        this.todoList = []
      } else {
        currentPage++
      }
      const { code, data } = await pageSelfRecordSuggest({
        current: currentPage,
        size: this.pageSize,
        optionUserId: localStorage.pskh_userId,
        tenantId: localStorage.pskh_tenantId,
      })
      this.loading = false
      if (code === 0 && data && data.records) {
        this.todoNum = data.total
        this.todoList.push(...data.records)
        if (isAppend) {
          this.pageIdx++
        }
        this.totalPages = data.pages
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.todo-box {
  height: 100%;
  display: flex;
  overflow: hidden;
  position: relative;
  align-items: stretch;
  .todo-tabs {
    background-image: url('../../../assets/images/home/BG3.png');
    width: 216px;
    padding: 30px;
    .todo-tab-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      color: #333333;
      line-height: 67px;
      cursor: pointer;
      .count-box {
        height: 36px;
        border-top-left-radius: 18px;
        border-bottom-left-radius: 18px;
        width: 60px;
        z-index: 100;
        position: relative;
      }

      .count {
        font-size: 16px;
        background: #4b94fb;
        opacity: 0.4;
        border-radius: 13px;
        color: #ffffff;
        font-weight: normal;
        position: absolute;
        left: 7px;
        top: 50%;
        transform: translateY(-50%);
        min-width: 35px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        padding: 0 5px;
      }
    }
    .activity {
      color: #0060c4;
      font-weight: bold;
      .count-box {
        background: #f2f7fb;
        box-shadow: -8px 0px 10px 1px rgba(0, 0, 0, 0.25), 0px 0px 0 0 rgba(0, 0, 0, 0.08);
        .count {
          background: #0060c4 !important;
          color: #ffffff !important;
          opacity: 1 !important;
        }
      }
      .count-box::before,
      .count-box::after {
        content: '';
        display: block;
        height: 18px;
        width: 18px;
        position: absolute;
        bottom: 0;
        background: radial-gradient(20px at 20px 0px, transparent 20px, #f2f7fb 20px);
      }
      .count-box::before {
        right: -1px;
        transform: scaleX(-1);
        top: -18px;
      }
      .count-box::after {
        right: -1px;
        transform: rotate(180deg);
        bottom: -18px;
      }
    }
  }
  .todo-con {
    background: #f2f7fb;
    box-shadow: -10px 0px 19px 1px rgba(0, 0, 0, 0.25), 2px 0px 14px 2px rgba(0, 0, 0, 0.08);
    position: absolute;
    right: 0;
    top: 0;
    z-index: 99;
    height: 100%;
    width: calc(100% - 186px);
    .todo-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 30px;
      .todo-title {
        font-size: 22px;
        font-family: FZLTDHK;
        font-weight: bold;
        color: #0c55a2;
        line-height: 16px;
      }
    }
    .todo-scroll {
      height: calc(100% - 80px);

      .todo-list {
        padding: 0 30px;
        display: flex;
        flex-wrap: wrap;
      }
      .empty-box {
        position: absolute;
      }

      .todo-item {
        padding: 20px 18px;
        overflow: hidden;
        cursor: pointer;
        // width: 260px;
        width: 30%;
        height: 125px;
        background-color: #ffffff;
        border-radius: 4px;
        font-size: 14px;
        // margin-right: 20px;
        margin-right: 5%;
        &:nth-child(3n) {
          margin-right: 0;
        }
        .todo-top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: relative;
          padding-left: 8px;
          font-weight: bold;
          border-bottom: 1px solid #e4e4e4;
          padding-bottom: 8px;
          &::before {
            width: 5px;
            height: 5px;
            content: '';
            background: #f02525;
            border-radius: 50%;
            position: absolute;
            left: -4px;
          }
          &.readed {
            &::before {
              background: #bcbcba;
            }
          }
        }
        .todo-tips {
          color: #db2020;
          font-weight: normal;
        }
        .todo-title {
          font-size: 16px;
          font-family: PingFang;
          font-weight: bold;
          line-height: 24px;
          padding: 12px 0;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          &:hover {
            color: #2b78f1;
          }
        }
        .todo-time {
          color: #999999;
          font-size: 14px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        &:nth-child(n + 4) {
          border-bottom: 1px solid #e4e4e4;
          margin-top: 20px;
        }
      }
    }
  }
}
</style>
